<template>
    <Card :shadow="shadow" class="info-card-wrapper" :padding="0">
        <div class="content-con">
            <div class="left-area" :style="{background: color, width: leftWidth}">
                <common-icon class="icon" :type="icon" :size="iconSize" color="#fff"/>
            </div>
            <div class="right-area" :style="{width: rightWidth}">
                <div>
                    <slot></slot>
                </div>
            </div>
        </div>
    </Card>
</template>

<script>
import CommonIcon from '_c/common-icon'
export default {
    name: 'InforCard',
    components: {
        CommonIcon
    },
    props: {
        left: {
            type: Number,
            default: 36
        },
        color: {
            type: String,
            default: '#2d8cf0'
        },
        icon: {
            type: String,
            default: ''
        },
        iconSize: {
            type: Number,
            default: 20
        },
        shadow: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        leftWidth () {
            return `${this.left}%`
        },
        rightWidth () {
            return `${100 - this.left}%`
        }
    }
}
</script>

<style lang="less">
.common{
  position: absolute;
  top: 0px;
  height: 100%;
  display: table;
  text-align: center;
}
.size{
  width: 100%;
  height: 100%;
}
.middle-center{
  display: table-cell;
  vertical-align: middle;
}
.info-card-wrapper{
  .size;
  overflow: hidden;
  .ivu-card-body{
    .size;
  }
  .content-con{
    .size;
    position: relative;
    .left-area{
      .common;
      left: 0px;
      & > .icon{
        .middle-center;
      }
    }
    .right-area{
      .common;
      right: 0px;
      & > div{
        .middle-center;
      }
    }
  }
}
</style>
